<template>
  <devicePanel
    :panel-data="panelData"
    :common-type="deviceInfo.commonType"
    :sn="deviceInfo.serialNumber"
    :groupId="deviceInfo.groupId"
    :productClass="deviceInfo.productClass"
    :select-port="portselect"
    @childSelectPort="handelSelectPort"
    ref="switchPanel"
  >
    <template slot="ports" slot-scope="{ port, index }">
      <div
        style="position: relative; padding: 0px 4px"
        ondragstart="return false;"
      >
        <icon-font
          :type="getDevicePanelPortIcon(port.mediumType)"
          :rotate="index % 2 == 0 ? 0 : 180"
          :style="{ fontSize: '18px' }"
          :class="['port-icon', getPortSpeed(port)]"
        />
        <div style="pointer-events: none">
          <icon-font
            v-if="checkUplink(port, true)"
            type="ic-port-union"
            :style="{
              fontSize: '18px',
              position: 'absolute',
              top: '0px',
            }"
            class="over-icon"
          />
          <icon-font
            v-for="item in getPortStatus(port)"
            :key="item"
            :type="'ic-port-' + item"
            class="status-icon"
          />
        </div>
      </div>
    </template>
  </devicePanel>
</template>
<script>
import {
  getDevicePanelLayout, // 获取设备面板布局
  getSwitchOrder,
  formatterSwitchAgObj,
  greenSpeed,
  getDevicePanelPortIcon,
} from '@utils/deviceTools';
import { devicePanel } from '@components';
import { mapState } from 'vuex';
export default {
  name: 'SwitchPanel',
  props: {
    deviceInfo: {
      type: Object,
      default: () => {},
    },
    portselect: {
      type: Array,
      default: () => {},
    },
  },
  components: {
    devicePanel,
  },
  data() {
    return {
      panelData: [],
    };
  },
  computed: {
    ...mapState('DeviceDetail', {
      portsMap: (state) => {
        const currentDevicePortsData = state.switch.currentDevicePortsData;
        const map = {};
        currentDevicePortsData.forEach((item) => {
          if (
            item.devOrder != undefined &&
            item.slotOrder != undefined &&
            item.order != undefined
          ) {
            const key = `${item.devOrder}_${item.slotOrder}_${getSwitchOrder(
              item
            )}`;
            map[key] = item;
          }
        });
        return map;
      },
      agMap: (state) => {
        const currentDevicePortsData = state.switch.currentDevicePortsData;
        return formatterSwitchAgObj(currentDevicePortsData);
      },
    }),
    ...mapState('devices', ['multiPanelClass']),
    uplink() {
      const currentDevicePortsData = this.$store.state.DeviceDetail.switch
        .currentDevicePortsData;
      for (let i = 0; i < currentDevicePortsData.length; i++) {
        const item = currentDevicePortsData[i];
        if (item.uplink) {
          //判断是否聚合口
          if (item.portGroupId > 0) {
            return this.getAgPorts(item.portGroupId);
          } else {
            return {
              alias: item.alias,
              ports: [item.alias],
            };
          }
        }
      }
      return {
        alias: '',
        ports: [],
      };
    },
    isMultiPanelSwitch() {
      const multiPanelClass = this.$store.state.devices.multiPanelClass;
      return this.checkMultiPanelSwitch(multiPanelClass);
    },
  },
  watch: {
    deviceInfo: {
      handler() {
        this.initPanel();
      },
      deep: true,
    },
  },
  mounted() {
    this.initPanel();
  },
  methods: {
    getDevicePanelPortIcon,
    /**
     * @description: 设备面板数据
     * @param {*} data
     */
    async initPanel() {
      const slotsLayout = await getDevicePanelLayout(
        this.deviceInfo.serialNumber,
        this.deviceInfo.productClass,
        this.$store
      );
      this.panelData = slotsLayout;
    },
    getPortSpeed({ portorder, mediumType }) {
      const currentPort = this.portsMap[portorder];
      let speedClass = '';
      if (currentPort) {
        let currentPortMediumType = currentPort.mediumType || 'Copper';
        if (currentPortMediumType === mediumType) {
          if (currentPort && currentPort.enable == 'true') {
            const speed = currentPort.speed;
            const status = currentPort.status;
            if (status == 'Up') {
              if (greenSpeed.indexOf(speed) > -1) {
                speedClass = 'green';
              } else {
                speedClass = 'yellow';
              }
            } else if (status == 'Down') {
              speedClass = 'black';
            } else if (status == 'Dormant') {
              speedClass = 'gray';
            } else if (status == 'Unknown') {
              speedClass = 'red';
            }
          } else {
            speedClass = 'gray';
          }
        } else {
          speedClass = 'gray';
        }
      }

      return speedClass;
    },
    getPortStatus({ portorder, mediumType }) {
      const currentPort = this.portsMap[portorder];
      if (currentPort) {
        const currentPortMediumType = currentPort.mediumType || 'Copper';
        if (currentPortMediumType === mediumType) {
          const statusIcon = [];
          if (currentPort.poeStatus == 'On') {
            statusIcon.push('POE');
          }
          if (currentPort.poeStatus == 'Erroneous') {
            statusIcon.push('POEabnormal');
          }
          if (currentPort.isBlock == 'TRUE' && currentPort.status != 'Down') {
            statusIcon.push('block');
          }
          return statusIcon;
        } else {
          return [];
        }
      } else {
        return [];
      }
    },
    /**
     * @description: 判断是否上联口
     * @param {*}
     * @return {*}
     */
    checkUplink({ portorder }) {
      if (this.portsMap[portorder]) {
        return this.portsMap[portorder].uplink || false;
      }
      return false;
    },
    getAgOrders(agId) {
      const aggPort = [];
      for (let name in this.portsMap) {
        if (this.portsMap[name].portGroupId == agId) {
          aggPort.push(name);
        }
      }
      return aggPort;
    },
    /**
     * @description: 校验交换机是否多面板交换机
     * @param {*} data
     */
    checkMultiPanelSwitch(multiPanelClass) {
      return multiPanelClass.includes(this.deviceInfo.productClass);
    },
    /**
     * @description: 获取Ag口包含的接口
     * @param {*} data
     */
    getAgPorts(agId) {
      return {
        alias: `${this.deviceInfo.aggPrefix}${agId}(${
          (this.agMap[agId] && this.agMap[agId].join(',')) || ''
        })`,
        ports: this.agMap[agId],
      };
    },
    handelSelectPort(data) {
      this.$emit('SelectPort', data);
    },
    //根据orderList获取端口数据
    getPortsDataForOrder(orderList) {
      return orderList.map((item) => {
        return this.portsMap[item];
      });
    },
    //根据端口alias获取order获取端口数据
    getrOrderForPortsData(aliasList) {
      let orderList = [];
      for (let i = 0; i < aliasList.length; i++) {
        let alias = aliasList[i].alias;
        for (let key in this.portsMap) {
          if (this.portsMap[key].alias == alias) {
            orderList.push(key);
          }
        }
      }
      return orderList;
    },
  },
};
</script>
<style lang="less" scoped>
.port-icon {
  color: @portBlack;
  &.green {
    color: @portGreen;
  }
  &.yellow {
    color: @portYellow;
  }
  &.red {
    color: @portRed;
  }
  &.disbaled {
    color: @portDisabled;
  }
}

.over-icon {
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
}
.status-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  border: 1px solid #595959;
  color: #595959;
  text-align: center;
  line-height: 16px;
  background-color: #fff;
  z-index: 2;
  bottom: 0px;
  right: 0px;
  transform: scale(0.75);
}
</style>
